<template>
	<view style="background-color: #f0f0f0;padding: 10px;">
		<view class="addinex_body" style="width: 100%; ">
			<view style="width: 100%; text-align: left; color: #333333; font-size: 15px;"><text
					style="color: red;">*</text>必填</view>
			<view class="addindex_body">
				<view class="form">
					<view class="form_s">
						<text class="texts">收件人:</text><input placeholder="收件人姓名" style="width: 80%; text-align: right;"
							type="text" v-model="datalist.name" />
					</view>
					<view class="form_s">
						<text class="texts">联系电话:</text><input placeholder="收件人联系电话"
							style="width: 80%; text-align: right;" type="number" v-model="datalist.phone" />
					</view>
					<view class="form_s">
						<!-- <text class="texts">所在地区:</text><input placeholder="省市区.." @click="getLocationInfo"
							style="width: 80%; text-align: right;" type="text" v-model="datalist.city" /> -->

						
						<text class="texts">省-市-区:</text>
						<view
							style=" text-align: right;width: 70%; height: 35px; border: none; border-radius: 5px;"
							v-model="duihuan">

							<view style="display: flex;justify-content: center; flex-direction: column;">
								<view class="wrap"
									style="display: flex;justify-content: center; flex-direction: column;" type="text">

									<picker style="display: flex;justify-content: center; flex-direction: column;"
										class="pickerList" mode="multiSelector" :range="newProvinceDataList"
										:value="multiIndex" @change="pickerChange" @columnchange="pickerColumnchange">
										<view class="le"
											style="display: flex;justify-content: center; flex-direction: column;">
											{{patientBasic.cityName}}
										</view>
									</picker>
								</view>
							</view>



						</view>
					</view>
					<view style="display: flex; justify-content: space-between; margin: 20px;  ">
						<text class="texts" style="">详细地址:</text>
						<u--textarea style="text-align: right; width: 242px;" v-model="datalist.address" border='none'
							placeholder="街道,楼层门牌等信息" autoHeight></u--textarea>
					</view>
				</view>
			</view>
		</view>

		<view class="addinex_body" style="width: 100%; ">
			<view style="width: 100%; text-align: left; color: #333333; font-size: 15px; margin-top: 20px;"><text
					style="color: red;"></text>选填</view>
			<view class="addindex_body">
				<view class="form">
					<view style="display: flex;justify-content: initial;">
						<u-switch v-model="value4" @change="change" size="20"></u-switch><text
							style="margin-left: 10px;">设为默认地址</text>
					</view>
				</view>
				<view class="form">
					<view style="display: flex;justify-content: initial;">
						<u-button type="primary" text="保存" @click="tobaoc"></u-button>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import provinceData from './provinceData.js' //引入的地址地区
	export default {
		data() {
			return {
				value4: false,
				datalist: {
					name: '',
					phone: '',
					province: '', //省
					city: '', //市
					area: '', //区
					address: '',
					type: 0
				},
				oldpProvinceDataList: provinceData,
				newProvinceDataList: [
					[],
					[],
					[]
				],
				multiIndex: [0, 0, 0],
				patientBasic: {
					// 地区
					cityName: '点击选择省/市/区', //当前点击的地址
				}

			}
		},
		onLoad() {
			for (let i = 0; i < this.oldpProvinceDataList.length; i++) {
				this.newProvinceDataList[0].push(this.oldpProvinceDataList[i].name);
			}
			for (let i = 0; i < this.oldpProvinceDataList[0].city.length; i++) {
				this.newProvinceDataList[1].push(this.oldpProvinceDataList[0].city[i].name);
			}
			for (let i = 0; i < this.oldpProvinceDataList[0].city[0].area.length; i++) {
				this.newProvinceDataList[2].push(this.oldpProvinceDataList[0].city[0].area[i]);
			}
		},
		methods: {
			pickerChange(e) {
				this.multiIndex = e.detail.value;
				this.patientBasic.cityName =
					`${this.newProvinceDataList[0][this.multiIndex[0]]}/${this.newProvinceDataList[1][this.multiIndex[1]]}/${this.newProvinceDataList[2][this.multiIndex[2]]}`
			
			
				this.datalist.province = this.newProvinceDataList[0][this.multiIndex[0]]
				this.datalist.city = this.newProvinceDataList[1][this.multiIndex[1]]
				this.datalist.area = this.newProvinceDataList[2][this.multiIndex[2]]
			
			},
			pickerColumnchange(e) {
			
				if (e.detail.column === 0) {
					this.multiIndex[0] = e.detail.value
					this.newProvinceDataList[1] = this.oldpProvinceDataList[this.multiIndex[0]].city.map((item, index) => {
						return item.name
					})
					if (this.oldpProvinceDataList[this.multiIndex[0]].city.length === 1) {
						this.newProvinceDataList[2] = this.oldpProvinceDataList[this.multiIndex[0]].city[0].area.map((item,
							index) => {
							return item
						})
					} else {
						this.newProvinceDataList[2] = this.oldpProvinceDataList[this.multiIndex[0]].city[this.multiIndex[
							1]].area.map((item, index) => {
							return item
						})
					}
					this.multiIndex.splice(1, 1, 0)
					this.multiIndex.splice(2, 1, 0)
				}
				// 第二列滑动
				if (e.detail.column === 1) {
					this.multiIndex[1] = e.detail.value
					this.newProvinceDataList[2] = this.oldpProvinceDataList[this.multiIndex[0]].city[this.multiIndex[1]]
						.area.map((item, index) => {
							return item
						})
					// 第二列 滑动 第三列 变成第一个
					this.multiIndex.splice(2, 1, 0)
				}
				// 第三列滑动
				if (e.detail.column === 2) {
					this.multiIndex[2] = e.detail.value
				}
			},
			change(e) {
				console.log('change', e);

				if (e == true) {
					this.datalist.type = 1
				} else {
					this.datalist.type = 0
				}
				console.log(this.datalist.type);
			},
			tobaoc() {

				if (this.datalist.name == '' || this.datalist.city == '' || this.datalist.address == '' || this.datalist
					.phone == '') {
					uni.$u.toast('请填写必填项！');
				} else {
					this.$http.postaddress(this.datalist).then(res => {
						console.log(res);
						uni.$u.toast(res.info);
						uni.navigateTo({
							url:'../adds/adds'
						})
					})
					console.log(this.datalist);

				}



			},

			getLocationInfo() {
				var _this = this
				uni.chooseLocation({
					success: function(res) {
						_this.datalist.city = res.address
					}
				});
			},

		}
	}
</script>

<style>
	.addindex_body {}

	.form {
		background-color: #FFFFFF;
		padding: 10px;
		margin-top: 10px;
		border-radius: 5px;
	}
	.u-textarea .data-v-7ecdb080{
		width: 100px;
	}
	.form_s {
		display: flex;
		justify-content: center;
		margin: 20px;
	}

	.texts {
		text-overflow: ellipsis;
		width: 100px;
		font-size: 15px;
		color: #4c4e51;
	}
</style>
